<template>
  <div>
    <app-head></app-head>
    <app-body>
      <div style=" margin: 15px 0 ">
        <el-container style="margin-bottom: 15px">
          <el-header>
            <h1 style="text-align: center">杭州-梅家坞茶园——松轩竹径，药圃花蹊，茶园稻陌，竹坞梅溪</h1>
          </el-header>
          <video src="../../assets/caizhai.mp4" controls width="100%"></video>
          <el-container>
            <el-main>
              <h2>西湖龙井的千年原乡</h2>
              <p style="text-indent: 32px">坐落于杭州西湖西南五云山麓的梅家坞，是西湖龙井茶核心产区中的“活态博物馆”。这里三面环山、一面临江，湿润的季风裹挟着钱塘江的水汽，在海拔300米的梯田式茶园间凝结成终年缭绕的云雾。</p>
              <p style="text-indent: 32px">700余年种茶史孕育出独特的“狮龙云虎”地貌体系，其中梅家坞独占“云”字精髓，现存3800亩老茶园中，80%为百年以上龙井群体种古茶树。这些扎根于白砂土中的茶树，因石英岩风化土壤的滋养，孕育出“糙米色、兰花韵”的顶级茶质。春分至清明期间，漫山茶树新芽初绽，茶农沿用南宋“一芽二叶”采摘古法，指尖翻飞间，青叶携晨露落入竹篓，空气里浮动的茶香与远处灵隐寺的钟声交织，勾勒出江南春日最诗意的茶山画卷。</p>
            </el-main>
            <el-aside width="320px">
              <img src="../../assets/img_2.png" alt="" style="width: 300px;height: auto;margin-top: 50px;border-radius: 20px">
            </el-aside>
          </el-container>
          <el-container>
            <el-main>
              <h2>沉浸式采茶体验-从指尖到舌尖的茶道觉醒<br>
                ——--梅家坞推出“春茶探源计划”，将传统采茶升华为五感沉浸的东方美学修行</h2>
              <h3>清晨·古法采青</h3>
              <p style="text-indent: 32px">身着苎麻茶服，持紫竹茶篓随非遗传承人步入云海茶田，学习“阴阳手”采茶技法（左手托枝，右手45°提采），每采满三捧鲜叶即置入百年樟木茶篚自然醒鲜，全程竹器盛装、指尖避汗。</p>
              <h3>正午·匠心制茶</h3>
              <p style="text-indent: 32px">于百年老宅“龙井工坊”体验</p>
              <h3>铜锅三式</h3>
              <p>在紫铜锅中练习“抓、抖、搭”手法，感知茶叶从104℃青锅到72℃辉锅的形态蜕变。</p>
              <h3>陶瓮藏韵</h3>
              <p>将炒制茶叶存入石灰陶瓮，见证72小时“收灰”古法对茶香的凝炼。</p>
              <h3>茶禅一味</h3>
              <p>以虎跑泉冲泡自制茶，佐龙井茶酥，在古琴《采茶舞曲》中品悟茶道轮回。</p>
              <h3>星夜·茶经重现</h3>
              <p>星空茶园内<br>
                琉璃盏采集夜露，复原《茶经》「月露茶」古方<br>
                3D光影投射千年茶树，动态呈现茶文化典籍<br>
                获区块链认证的采茶数据链，生成专属数字茶资产</p>
              <b>（全程由非遗传承人指导，含有机茶园认证、古法制茶器具及文化体验）
                活动时段：每日8:00-21:00</b>
              <p style="color: #1B6921">秘境彩蛋：完成全流程者可解锁百年茶仓探秘特权！</p>
              <h3>咨询电话：66-888888</h3>
              <button @click="yuyue()">点击预约</button>
            </el-main>

          </el-container>
        </el-container>
      </div>
    </app-body>
    <app-foot></app-foot>


    <el-dialog
        title="预约信息"
        :visible.sync="dialogVisible"
        width="20%"
        :before-close="handleClose">
        <label class="label" ><span>姓</span><span>名</span></label>
        <input type="text" required id="name"><br>
        <label class="label" ><span>手</span><span>机</span><span>号</span></label>
        <input type="text" required id="phone"><br>
        <label class="label" ><span>同</span><span>行</span><span>人</span><span>数</span></label>
        <input type="number" min="1" value="1" required id="number">
        <br>
        <br>
        <br>
        <br>
        <button @click="dialogVisible=false">取 消</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button @click="queding()">确 定</button>
    </el-dialog>
  </div>
</template>

<script>
import AppFoot from "@/components/common/AppFoot.vue";
import AppHead from "@/components/common/AppHeader.vue";
import AppBody from "@/components/common/AppPageBody.vue";

export default {
  name: "index",
  components: {
    AppHead,
    AppBody,
    AppFoot
  },
  data() {
    return {
      dialogVisible: false,
      outsideImgList: [
        { url: require("/src/assets/lun1.jpg")},
        { url: require("/src/assets/lun2.jpg")},
        { url: require("/src/assets/lun3.jpg")},
        { url: require("/src/assets/lun4.jpg")},
        { url: require("/src/assets/lun5.jpg")},
        { url: require("/src/assets/lun6.jpg")},
      ]
    };
  },
  methods: {
    yuyue(){
      this.dialogVisible = true;
    },
    queding(){
      console.log($("#number").val())
      if ($("#name").val() === "" || $("#phone").val() === "") {
        this.$message.warning("请填写完整信息")
      }else {
        var telphone = $("#phone").val()
        var phoneReg= /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        var flag = phoneReg.test(telphone);
        if(flag)
        {
          this.$message.success("预约信息已成功发送到您的手机，请注意查收！")
          this.dialogVisible = false;
        }else{
          this.$message.warning("电话号码格式有误")
        }

      }

    }
  }
}
</script>

<style scoped>
.is-vertical{
  border: 1px dotted #1B6921;
}
.el-header{
  background-color: #097545;
  color: #fff;
  line-height: 30px;
  font-weight: 900;
  text-align: left;
}
.dis{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  div{
    position: relative;
  }
  p{
    position: absolute;
    bottom: 4px;
    color: #fff;
    text-align: center;
    background-color: #1B6921;
    width: 100%;
    opacity: 0.6;
    margin: 0;
  }
  img{
    width: 210px;
    height: 275px;
  }
}
.label{
  width: 50px;
  display: flex;
  justify-content: space-between;

}
</style>